<template>
    <nav class="tt-nav">
        <ul>
            <!-- {{home.navList}} -->
            <li
                v-for="(item,index) in home.navList"
                v-bind:key="item.id">
                <a href="#/classify" v-if="index==0">
                    <img :src="item.pic" alt="">
                    <p>{{item.name}}</p>
                </a>
                <a :href="'#/home/'+index" v-if="index!=0">
                    <img :src="item.pic" alt="">
                    <p>{{item.name}}</p>
                </a>
            </li>
        </ul>
    </nav>
</template>

<style lang="less">
@import "../../assets/less/variable.less";
.tt-nav {
  margin-top: 0px;
  //height: 150px;
  background-color: rgba(255, 255, 255, 1);
  width: 100%;
  padding-top: @padding1;
  padding-bottom: @padding2;
  ul {
      width: 100%;
      &::after {
          content: "";
          display: block;
          clear: both;
      }
      li { 
          width: 25%;
          float: left;
          a {
              display: block;
              text-align: center;
            //   border: 1px solid #000;
              padding: 5px;
              img {
                  width: 45px;
                  vertical-align: middle;
              }
              p {
                  font-size: 16px;
                //   color: grey;
              }
          }
      }
  }
}
</style>

<script>
import { mapState } from 'vuex'
export default {
    data(){
        return {
            
        }
    },
    computed: {
        ...mapState(['home'])
    }
}
</script>
